class GenVideo {
  constructor (url) {
    this.url = url
    const _videoEle = document.createElement('video');
    _videoEle.src = this.url;
    // _videoEle.setAttribute("x-webkit-airplay", "");
    _videoEle.setAttribute("webkit-playsinline", "playsinline");
    _videoEle.setAttribute("playsinline", "playsinline");
    _videoEle.controls = true
    if (/android/i.test(navigator.userAgent)) {
      _videoEle.setAttribute("x5-video-player-type", "h5")
      _videoEle.setAttribute("x5-video-player-fullscreen", "false")
    }
    _videoEle.style.display = 'block'
    this.videoElement = _videoEle;
  }
  onEnd(func) {
    this.videoElement.addEventListener('ended', () => {
      func()
    })
    this.videoElement.addEventListener("x5videoexitfullscreen", function(){
      func()
    })
  }
  onTouch(func) {
    let touch = false
    this.videoElement.addEventListener("touchstart", function(e){
      e.preventDefault()
      touch = true
    }, false)
    this.videoElement.addEventListener("touchend", function(e){
      e.preventDefault()
      if (touch) func()
      touch = false
    }, false)
  }
  append(n) {
    n.appendChild(this.videoElement)
  }
  play() {
    this.videoElement.style.display = 'block';
    this.videoElement.play()
  }
  pause() {
    this.videoElement.pause()
  }
  get paused() {
    return this.videoElement.paused
  }
}

function isIphoneX(){
  return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}

const normalVideo = 'https://rs.creditcard.cmbc.com.cn/menhu/xrcz/birth1.2fb836b3.mp4'
const iphoneXVideo = 'https://rs.creditcard.cmbc.com.cn/menhu/xrcz/video.c219b97d.mp4'

const videoUrl = isIphoneX() ? iphoneXVideo : normalVideo

const _video = new GenVideo(videoUrl);

export default _video